<!--中国省份地图-->

<template>
  <div class="w-h-full">
    <!--组件遮罩层，用于在设计器中显示-->
    <div v-if="shade" class="shade"></div>

    <div v-resize="resizeHandle" style="width: 100%; height: 100%;">
      <div :id="'chart-'+component.id+'-'+chartDomNum" class="w-h-full"></div>
    </div>

    <Button v-if="component.compConfigData.chartOption.openRunInHole"
            type="primary" size="small" style="position: absolute; left: 10px; top: 10px;" @click="goBackMap">返回</Button>
  </div>
</template>

<script>

  import FuncCompMixin from '@/mixin/FuncCompMixin'
  import ChartCompMixin from '@/mixin/ChartCompMixin'
  import PnDesigner from '@/utils/PnDesigner'

  import ChinaProvinceMapChart from './ChinaProvinceMapChart'
  import _ from 'lodash'

  const _this = {
    name: 'ChinaProvinceMapChart', // 此名称必须填写，且必须与组件文件名相同
    mixins: [FuncCompMixin, ChartCompMixin],
    attr: {
      version: '2.2',
      configDataTemp: Object.assign({

        // 组件相关配置属性，Echarts图表组件的相关配置属性，必须在chartOption对象下定义
        chartOption: {
          openRunInHole: false, // 开启下钻
          visualMap: [],
          title: PnDesigner.buildTitleConfigData(),
          tooltip: {
            show: true
          },
          geo: {
            map: '100000',
            aspectScale: 0.75,
            layoutCenter: ['50%', '50%'], // 默认中心位置
            layoutSize: '100%', // 可以控制地图的大小
            roam: true,
            label: {
              show: false,
              color: '#fff',
              fontSize: 10,
              backgroundColor: '',
              borderColor: '',
              borderWidth: 0,
              borderRadius: 0,
              padding: 0,
              shadowColor: '',
              shadowBlur: 0,
              formatter: '{a}'
            },
            itemStyle: {
              areaColor: 'rgba(66,66,66,0.9)',
              borderColor: '#757575',
              borderWidth: 1,
              borderType: 'solid',
              shadowBlur: 0,
              shadowColor: ''
            },
            emphasis: {
              itemStyle: {
                areaColor: '#1e88e5', //悬浮背景
                borderColor: '#1565c0',
                borderWidth: 1,
                borderType: 'solid',
                shadowBlur: 20,
                shadowColor: '#424242',
              }
            },
            regions: []
          },

          series: []
        },

        map: '100000',

      }, PnDesigner.buildFuncCompDatasourceField({ // 如果组件需要配置数据源，则需要调用此函数构建数据源字段对象
        ds_resultObjTemplate: [

        ],
        ds_resultObj: [

        ],
        ds_useFilter: true, // 是否使用过滤器，默认不使用
        ds_useTimer: true, // 是否开启定时器配置，默认不开启
      }), PnDesigner.buildFuncCompGlobalField(), PnDesigner.buildEchartCompCustomOption(), PnDesigner.buildFuncCompInteractionConfiguration())
    },
    data() {
      return {
        lastAdCodes: [], // 存储下钻前的地图代码
      }
    },
    mounted() {
      this.$PnApi.MapGeoJsonApi.getGeoJsonByAdCode(this.component.compConfigData.map).then(result => {
        this.$Echarts.registerMap(this.component.compConfigData.map, result.data);
        this.init();
      })

      this.setTimer(() => { //定时器，如果当前组件不使用定时器，可以将此段代码删除
        this.init()
      })

      // 监听删除图层之后，更新视觉映射的seriesIndex值
      this.$EventBus.$on('pn_chinaProvinceMap_deleteSeriesItem', () => {
        this.component.compConfigData.chartOption.series.forEach(seriesItem => {
          if (seriesItem.type == 'map' || seriesItem.type == 'heatmap') {
            let vmObj = _.find(this.component.compConfigData.chartOption.visualMap, {id: seriesItem.id});
            vmObj.seriesIndex = _.findIndex(this.component.compConfigData.chartOption.series, {id: seriesItem.id})
          }
        })
      })
    },
    destroyed() {
      this.$EventBus.$off('pn_chinaProvinceMap_deleteSeriesItem')
    },
    methods: {
      init () { // 组价初始化函数，函数名必须使用init，不可更改
        this.initDatasource(() => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.drillHandler)
        }, (result) => {
          this.chart.setOption(this.chartOption);
          this.runCustomGlobalJsCode();
          this.runDataItemClickJsCode(this.drillHandler)
        });
      },

      /**
       * 下钻处理函数
       * @param params
       */
      drillHandler (params) {
        if (params.componentType == 'geo' || (params.componentType == 'series' && params.seriesType == 'map')) {
          if (this.component.compConfigData.chartOption.openRunInHole) {
            let aliasName = params.name;
            this.$PnApi.MapGeoJsonApi.getAdCodeByAliasName(aliasName).then(result => {
              if (result.data) {
                let adCode = result.data;
                this.lastAdCodes.unshift(this.component.compConfigData.map);
                this.$PnApi.MapGeoJsonApi.getGeoJsonByAdCode(adCode).then(result => {
                  this.$Echarts.registerMap(adCode, result.data);
                  this.component.compConfigData.map = adCode;
                  this.chart.setOption(this.chartOption);
                })
              }
            })
          }
        }
      },

      /**
       * 返回上一级地图
       */
      goBackMap () {
        if (this.lastAdCodes.length > 0) {
          this.$PnApi.MapGeoJsonApi.getGeoJsonByAdCode(this.lastAdCodes[0]).then(result => {
            this.$Echarts.registerMap(this.lastAdCodes[0], result.data);
            this.component.compConfigData.map = this.lastAdCodes[0];
            this.lastAdCodes.shift();
            this.chart.setOption(this.chartOption);
          })
        }
      }
    },
    computed: {
      chartOption () {

        let option = {
          tooltip: {
            show: this.component.compConfigData.chartOption.tooltip.show,
            trigger: 'item'
          },
          visualMap: this.component.compConfigData.chartOption.visualMap,
          title: PnDesigner.buildTitleChartOption(this.component.compConfigData.chartOption.title),
          series: [

          ],
          geo: {
            map: this.component.compConfigData.map,
            aspectScale: this.component.compConfigData.chartOption.geo.aspectScale,
            layoutCenter: [
                this.component.compConfigData.chartOption.geo.layoutCenter[0], this.component.compConfigData.chartOption.geo.layoutCenter[1]
            ],
            layoutSize: this.component.compConfigData.chartOption.geo.layoutSize,
            roam: this.component.compConfigData.chartOption.geo.roam,
            label: {
              show: this.component.compConfigData.chartOption.geo.label.show,
              color: this.component.compConfigData.chartOption.geo.label.color,
              fontSize: this.component.compConfigData.chartOption.geo.label.fontSize,
              backgroundColor: this.component.compConfigData.chartOption.geo.label.backgroundColor,
              borderColor: this.component.compConfigData.chartOption.geo.label.borderColor,
              borderWidth: this.component.compConfigData.chartOption.geo.label.borderWidth,
              borderRadius: this.component.compConfigData.chartOption.geo.label.borderRadius,
              padding: this.component.compConfigData.chartOption.geo.label.padding,
              shadowColor: this.component.compConfigData.chartOption.geo.label.shadowColor,
              shadowBlur: this.component.compConfigData.chartOption.geo.label.shadowBlur,
              formatter: this.component.compConfigData.chartOption.geo.label.formatter
            },
            itemStyle: {
              areaColor: this.component.compConfigData.chartOption.geo.itemStyle.areaColor,
              borderColor: this.component.compConfigData.chartOption.geo.itemStyle.borderColor,
              borderWidth: this.component.compConfigData.chartOption.geo.itemStyle.borderWidth,
              borderType: this.component.compConfigData.chartOption.geo.itemStyle.borderType,
              shadowBlur: this.component.compConfigData.chartOption.geo.itemStyle.shadowBlur,
              shadowColor: this.component.compConfigData.chartOption.geo.itemStyle.shadowColor
            },
            emphasis: {
              itemStyle: {
                areaColor: this.component.compConfigData.chartOption.geo.emphasis.itemStyle.areaColor,
                borderColor: this.component.compConfigData.chartOption.geo.emphasis.itemStyle.borderColor,
                borderWidth: this.component.compConfigData.chartOption.geo.emphasis.itemStyle.borderWidth,
                borderType: this.component.compConfigData.chartOption.geo.emphasis.itemStyle.borderType,
                shadowBlur: this.component.compConfigData.chartOption.geo.emphasis.itemStyle.shadowBlur,
                shadowColor: this.component.compConfigData.chartOption.geo.emphasis.itemStyle.shadowColor,
              }
            },
            regions: [

            ]
          }
        };

        if (this.component.compConfigData.chartOption.series.length > 0) {
          this.component.compConfigData.chartOption.series.forEach(item => {
            if (item.type == 'map') {
              let mapOption = item;
              let mapResultObj = _.find(this.runCustomFilter(this.component.compConfigData.ds_resultObj), {datasourceKey: item.datasourceKey});
              mapOption.data = mapResultObj ? mapResultObj.data : item.data;
              option.series.push(mapOption)
            } else if (item.type == 'effectScatter') {
              let effectScatterOption = item;
              let effectScatterResultObj = _.find(this.runCustomFilter(this.component.compConfigData.ds_resultObj), {datasourceKey: item.datasourceKey});
              effectScatterOption.data = effectScatterResultObj ? effectScatterResultObj.data : item.data;
              if (effectScatterOption.symbolSizeCallbackFuncCode) {
                effectScatterOption.symbolSize = eval(effectScatterOption.symbolSizeCallbackFuncCode)
              }
              if (effectScatterOption.label.labelFormatterCallbackFuncCode) {
                effectScatterOption.label.formatter = eval(effectScatterOption.label.labelFormatterCallbackFuncCode)
              }
              if (effectScatterOption.tooltip.tooltipFormatterCallbackFuncCode) {
                effectScatterOption.tooltip.formatter = eval(effectScatterOption.tooltip.tooltipFormatterCallbackFuncCode);
              }
              option.series.push(effectScatterOption)
            } else if (item.type == 'scatter') {
              let scatterOption = item;
              let scatterResultObj = _.find(this.runCustomFilter(this.component.compConfigData.ds_resultObj), {datasourceKey: item.datasourceKey});
              scatterOption.data = scatterResultObj ? scatterResultObj.data : item.data;
              if (scatterOption.symbolSizeCallbackFuncCode) {
                scatterOption.symbolSize = eval(scatterOption.symbolSizeCallbackFuncCode)
              }
              if (scatterOption.label.labelFormatterCallbackFuncCode) {
                scatterOption.label.formatter = eval(scatterOption.label.labelFormatterCallbackFuncCode)
              }
              if (scatterOption.tooltip.tooltipFormatterCallbackFuncCode) {
                scatterOption.tooltip.formatter = eval(scatterOption.tooltip.tooltipFormatterCallbackFuncCode);
              }
              option.series.push(scatterOption)
            } else if (item.type == 'lines') {
              let linesOption = item;
              let linesResultObj = _.find(this.runCustomFilter(this.component.compConfigData.ds_resultObj), {datasourceKey: item.datasourceKey});
              linesOption.data = linesResultObj ? linesResultObj.data : item.data;
              option.series.push(linesOption)
            } else if (item.type == 'heatmap') {
              let heatmapOption = item;
              let heatmapResultObj = _.find(this.runCustomFilter(this.component.compConfigData.ds_resultObj), {datasourceKey: item.datasourceKey});
              heatmapOption.data = heatmapResultObj ? heatmapResultObj.data : item.data;
              option.series.push(heatmapOption)
            }
          })
        }

        // 下面这一段代码用于合并组件的扩展配置，如果组件不需要扩展配置，可以删掉
        option = this.$PnDesigner.mergeChartCustomOption(option, this.component.compConfigData.customOption);

        return option;
      }
    },
    watch: {
      'component.compConfigData.map': {
        handler: function (val, oldVal) {
          this.$PnApi.MapGeoJsonApi.getGeoJsonByAdCode(val).then(result => {
            this.$Echarts.registerMap(val, result.data);
            this.chart.setOption(this.chartOption);
          })
        }
      }
    }
  };

  export default _this
</script>

<style scoped>

</style>
